/**
 * ThemeToggle - 主题切换组件
 * 
 * 提供明暗主题切换按钮和设置选项
 */

import { Moon, Sun, Monitor } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { useThemeStore, type Theme } from '@/store/theme';
import { cn } from '@/lib/utils';

/**
 * 主题切换按钮（下拉菜单）
 */
export function ThemeToggle() {
  const { theme, setTheme } = useThemeStore();

  const themes: Array<{ value: Theme; label: string; icon: React.ReactNode }> = [
    { value: 'light', label: '浅色', icon: <Sun className="h-4 w-4" /> },
    { value: 'dark', label: '深色', icon: <Moon className="h-4 w-4" /> },
    { value: 'system', label: '跟随系统', icon: <Monitor className="h-4 w-4" /> },
  ];

  return (
    <DropdownMenu>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-9 w-9">
                <Sun className="h-4 w-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
                <span className="sr-only">切换主题</span>
              </Button>
            </DropdownMenuTrigger>
          </TooltipTrigger>
          <TooltipContent>
            <p>切换主题</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <DropdownMenuContent align="end">
        {themes.map((t) => (
          <DropdownMenuItem
            key={t.value}
            onClick={() => setTheme(t.value)}
            className={cn(
              'cursor-pointer',
              theme === t.value && 'bg-accent'
            )}
          >
            <div className="flex items-center gap-2">
              {t.icon}
              <span>{t.label}</span>
            </div>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/**
 * 简单的主题切换按钮（不带下拉菜单）
 */
export function SimpleThemeToggle() {
  const { toggleTheme, resolvedTheme } = useThemeStore();

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleTheme}
            className="h-9 w-9"
          >
            <Sun className="h-4 w-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
            <span className="sr-only">
              {resolvedTheme === 'dark' ? '切换到浅色' : '切换到深色'}
            </span>
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>{resolvedTheme === 'dark' ? '切换到浅色' : '切换到深色'}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

/**
 * 主题设置卡片（用于设置页面）
 */
export function ThemeSettingsCard() {
  const { theme, setTheme } = useThemeStore();

  const themes: Array<{
    value: Theme;
    label: string;
    description: string;
    icon: React.ReactNode;
  }> = [
    {
      value: 'light',
      label: '浅色主题',
      description: '使用明亮的配色方案',
      icon: <Sun className="h-5 w-5" />,
    },
    {
      value: 'dark',
      label: '深色主题',
      description: '使用深色配色方案，更护眼',
      icon: <Moon className="h-5 w-5" />,
    },
    {
      value: 'system',
      label: '跟随系统',
      description: '自动跟随系统主题设置',
      icon: <Monitor className="h-5 w-5" />,
    },
  ];

  return (
    <div className="space-y-2">
      <div className="mb-3">
        <h3 className="text-sm font-medium">主题</h3>
        <p className="text-xs text-muted-foreground">
          选择你喜欢的主题外观
        </p>
      </div>
      <div className="grid gap-2">
        {themes.map((t) => (
          <button
            key={t.value}
            onClick={() => setTheme(t.value)}
            className={cn(
              'flex items-start gap-3 rounded-lg border p-3 text-left transition-all',
              'hover:bg-accent hover:border-primary/50',
              theme === t.value && 'border-primary bg-primary/5'
            )}
          >
            <div className={cn(
              'p-2 rounded-md',
              theme === t.value ? 'bg-primary text-primary-foreground' : 'bg-muted'
            )}>
              {t.icon}
            </div>
            <div className="flex-1 space-y-1">
              <p className="font-medium text-sm">{t.label}</p>
              <p className="text-xs text-muted-foreground">{t.description}</p>
            </div>
            {theme === t.value && (
              <div className="flex items-center">
                <div className="h-2 w-2 rounded-full bg-primary"></div>
              </div>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

